<template>
	<view>
		<view class="search">
			<icon type="search" color="white" size="10"></icon>
			<input type="text" v-model="keywords" confirm-type="search" @confirm="doSearch" placeholder="搜索商品" placeholder-class="placeholder"  />
		</view>
		<view class="list">
			<view class="row" v-for="(item,index) in list" :key="item.id">
				<image :src="item.img|getImage" mode="widthFix"></image>
				<view class="info">
					<text>{{item.goodsname}}</text>	
					<text>￥{{item.price}}</text>	
					<!-- <text>3565评论</text>	 -->
				</view>
			</view>
	
			
		</view>
		<view class="tishi">
			没有数据亲！
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				list:[],		//商品列表
				keywords:"",		//搜索关键字
			}
		},
		async onLoad(e){
			// console.log(e)
			let fid=e.fid;		//获取分类id
			let result =await this.$http({url:"api/getcategoods",data:{fid}}).catch(err=>{
				console.log(err);
			})
			// console.log(result);
			this.list=result.data.list
		},
		methods:{
			//执行搜索
			async doSearch(){
				//根据关键字搜索
				let result =await this.$http({url:"api/search",data:{keywords:this.keywords}})
					.catch(err=>{
					console.log(err);
				})
				// 渲染到页面
				this.list=result.data.list;
			}
		}
	}
	
	
</script>

<style>
	.search{
		margin: 50rpx;
		height: 80rpx;
		background-color: #f26b11;
		border-radius: 80rpx;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	icon{
		margin:0 10rpx 0 250rpx;
	}
	.placeholder{
		color: white;
		font-size: 25rpx;
	}
	.row{
		position: relative;
		margin: 10rpx 20rpx;
		height: 330rpx;
		border-bottom: 1rpx solid #AAAAAA;
	}
	image{
		position: absolute;
		top: 0;
		left:10rpx;
		width: 160rpx;
	}
	.info{
		height: 85%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 200rpx;
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		font-size: 25rpx;
	}
	.info text:nth-of-type(2){
		color: red;
	}
	.info text:nth-of-type(3){
		font-size: 20rpx;
		color: #AAAAAA;
	}
	.tishi{
		line-height: 200rpx;
		text-align: center;
		font-size: 40rpx;
		color: #006699;
	}
</style>
